<template>
    <div class="hello">
        <header-tab :isPhone="'3'" msg=" "></header-tab>
        <div class="topBox">
            <div style="margin-top: 20px;">
                <img :src="infoForm.avatar" alt="" class="img">
                <div class="fz16 w mt20 ta">{{ infoForm.memberName }}</div>
            </div>
            <router-link to="setSelf/index">
                <div class="set">
                    <img :src="setImg" alt="">
                </div>
            </router-link>

        </div>
        <div >
        <div class="middleBox ww m0">
            <div class="spacebetween p10">
                <div class="vip">
                    <img :src="vipImg" alt="" class="dl mr7 vipImg">
                    <div class="dl gray fz vipFont" :class="memberClass" @click="toMemberMsg">
                        {{ infoForm.memberLevelName }}
                    </div>
                </div>
                <div class="vip">
                    <img :src="signImg" alt="" class="dl mr7 vipImg">
                    <div class="dl gray fz vipFont">
                        <div @click="showModal=true,goSign()">签到有礼</div>
                    </div>
                </div>
            </div>

            <div class="bb p20">
                <div class="fz18 ml5 gray fw mb5">呗币</div>
                <div>
                    <img :src="bbImg" alt="" class="wh dl bImg">&nbsp;&nbsp;&nbsp;&nbsp;
                    <div class="dl fz" style="color:#423e3e;">&nbsp;&nbsp;￥{{ infoForm.memberBeibiBalance }}</div>
                </div>
            </div>
        </div>

        <div class="bottomBox 5B5A5A ww mt20 m0 sr">
            <div class="tBox" @click="toMemberMsg">
                <img :src="vip_Img" alt="" class="wh47 m0">
                <div class="fz w mt10 gray">会员权益</div>
            </div>
            <div class="cBox">
                <a :href="tel" class="fz w mt10 gray">
                    <img :src="keFuImg" alt="" class="wh47 m0">
                    <div class="mt10">
                        客服联系
                    </div>
                </a>
            </div>
            <div class="bBox">
                <router-link to="Ercode">
                    <img :src="fImg" alt="" class="wh47 m0">
                    <div class="fz gray mt10">
                        关注我们
                    </div>
                </router-link>
            </div>
        </div>
        </div>
        <!-- 签到弹窗-->
        <div class="popMaskBox">
            <div class="mask" v-if="showModal"></div>
            <div class="pop" v-if="showModal">
                <div @click="showModal=false" class="btn fr">
                    <img :src="closeImg" alt="" class="wh">
                </div>
                <div class="fz mt20" style="margin-left: 3.4666667vw;" v-if="signList.signInAwards.length > 0">连续签到 7
                    天奖励多多,已签到
                    <div style="color: #9A59D0;" class="dl fw">{{ signList.signTimes }}</div>
                    天
                </div>
                <div class="signBox">
                    <div class="oneRoundBox" v-for="(item,index) in signList.signInAwards" :key="index">
                        <div class="pr bbBox ">
                            <div :class="Number(item.day) <= signList.signTimes?'linePadding':'line'"
                                 v-if="index!=3 && index!=6"></div>
                            <div class="roundBox ">
                                <div :class="Number(item.day) <= signList.signTimes?'roundPadding':'round'">
                                    <div style="margin:10px;">
                                        <img :src="bbImg" alt="" style="width:100%;height:100%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="font-size:14px;padding:10px 0;width:70%;">
                            <div :class="Number(item.day) <= signList.signTimes?'bbColorPadding':'bbColor'">
                                {{ item.beibiQuantity }}呗币
                            </div>
                            <div :class="Number(item.day) <= signList.signTimes?'bbColorPadding':'bbColor'">
                                第{{ item.day }}天
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        <!--   -->
        <LoginOut @showCancelLogin="cancelLogin" :showFlag="loginShow"></LoginOut>
        <div class="text ta fz">市场有风险，投资需谨慎</div>

    </div>
    </div>
</template>

<script>
import {
    mapState
} from 'vuex'
import {
    setAllToken,
    removeAllToken,
    getAllToken
} from '@/utils/auth'
import {
    advertiseShow,
    getNowMemberLevel,
    memberInfo,
    memberInfoEdit,
    materialStatusList,
    bbDetails, SignIn
} from '@/api/index'
import LoginOut from '@/components/LoginOut'
import {
    Toast
} from 'vant';
import HeaderTab from "@/components/HeaderTab";

export default {
    components: {
        LoginOut,
        HeaderTab,
        // [Phone.name]: Phone,
        [LoginOut.name]: LoginOut,
        [Toast.name]: Toast
    },
    data() {
        return {
            setImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/set.png',
            vipImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/vip.png',
            signImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/qiandao1.png',
            bbImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/bb.png',
            vip_Img: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/vip_hold.png',
            keFuImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/phone.png',
            fImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/fllowme.png',
            store_info: {
                phone: 4008200668
            },
            phoneShow: false,
            loginShow: false,
            loginFlag: '',
            isLogin: true,
            infoForm: {
                avatar: "https://cdn.92jiangbei.com/newjiangbei/img/newImg/member/img-touxiang.png",
                memberName: '奖呗'
            },
            memberName: '普通会员',
            memberLevel: '1', // 等级
            memberClass: 'member',
            bbVal: 0,
            //签到弹窗
            showModal: false,
            closeImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/close.png',
            signList: {
                signInAwards: [],
                signTimes: 0
            },
        }
    },
    computed: {	
        tel() {
            return 'tel:' + Number(this.store_info.phone)
            //客服去电
        }
    },
    created: function () {
        this.isLogin = getAllToken("memberNo") ? true : false;
        this.memberNo = this.$store.state.user.memberNo || getAllToken("memberNo")
        if (this.memberNo) {
            this.getInfos();
            this.getNowMemberLevel(); // 获取当前会员级别名称
        }
    },
    methods: {
        //签到
        goSign() {
            // this.$router.push({
            //      path: "/home",   //跳到我的页面
            //      name: 'Home'
            // })
            if (this.$store.state.user.memberNo || getAllToken("memberNo")) {
                let para = { //类型：Object  必有字段  备注：无
                    "memberNo": this.memberNo
                }
                SignIn(para).then(res => {
                    if (res.data.code == "000") {
                        this.signList = res.data.content
                        let signTime = res.data.content.signTimes
                        if (res.data.content.todaySigned==false) {
                            return Toast('签到成功')
                        }else{
                            return Toast('今日已签到')
                        }
                    } else {
                        Toast(`${res.data.desc}`)
                    }
                })

            } else {
                this.loginIn();
                // eslint-disable-next-line no-undef
                Toast('请登录再签到')
            }
        },
        // 获取当前会员等级
        getNowMemberLevel() {
            let para = {
                memberNo: this.$store.state.user.memberNo || getAllToken("memberNo"),
            };
            getNowMemberLevel(para)
                .then(res => {
                    if (res.data.code == "000") {
                        let data = res.data.content
                        // console.log("获取当前会员等级=====>data", data)
                        this.memberDiscountSwitch = data.memberLevelDetail.memberDiscountSwitch;
                        this.memberDiscountScale = data.memberLevelDetail.memberDiscountScale;
                        if (this.memberDiscountSwitch == 0) {
                            console.log(111)
                        } else {
                            this.memberDiscountPrice = (Number(this.goodstotalPrice) * (100 - Number(this.memberDiscountScale)) / 100).toFixed(2);
                            this.goodstotalPrice = (Number(this.goodstotalPrice) - this.memberDiscountPrice).toFixed(2);
                        }
                    } else {
                        this.$vux.toast.show({
                            text: "网络异常，稍后重试"
                        });
                    }
                })
                .catch(err => {
                    // alert(err);
                });
        },
        // 用户信息及bb量
        getInfos() {
            let para = {
                "memberNo": this.$store.state.user.memberNo || getAllToken("memberNo"), //类型：String  必有字段  备注：广告位置编码
            }
            memberInfo(para).then((res) => {
                if (res.data.code == '000') {
                    console.log(res)
                    this.infoForm = res.data.content;
                    this.infoForm.avatar = this.infoForm.avatar ? this.infoForm.avatar : 'https://cdn.92jiangbei.com/newjiangbei/img/newImg/member/img-touxiang.png';
                } else {
                    Toast('网络异常，稍后重试');
                }
            }).catch((err) => {
            });
        },


        // 跳会员页
        toMemberMsg() {
            if (this.$store.state.user.memberNo) {
                location.href = `https://prizejiangbei.92jiangbei.com/#/memberBenefit/index?memberNo=${this.memberNo}`

            } else {
                this.loginIn();
            }
        },

        cancelLogin(val) {

            //memberNo  靠此 [铭牌] 登录

            this.loginShow = false;
            if (val == 2) {
                // 确认退出登录 loginout
                this.$store.dispatch('loginout', 1);
                this.$store.dispatch('Loginout', 1);

                this.isLogin = false;
                this.$store.state.user.memberNo == '';
                this.$store.state.shop.shopList == [];
                this.$store.state.shop.shopMap == {};
                this.$store.state.shop.totalShopNum == 0;
                removeAllToken("memberNo");
                localStorage.removeItem("shopList");
                localStorage.removeItem("shopMap");
                localStorage.removeItem("totalShopNum");
                this.$router.push({
                    path: '*' //匹配*时，跳到首页
                })
            }
        },

    }

}
</script>

<style lang="less" scoped>
.hello{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:#F3F3F3;
}
.topBox {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(#0A003E, #4E4864);
    overflow: hidden;
    height: 224px;
    width: 100%;

    .img {
        width: 64px;
        height: 64px;
        border-radius: 32px;
    }

    .set {
        width: 30px;
        height: 30px;
    }
}

.middleBox {
    width: 95%;
    // height: 140px;
    border-radius: 8px;
    margin-top: -70px;
    overflow-x: hidden;

    .bb {
        margin-left: 20px;

        .bImg {
            margin-bottom: 5px;
        }
    }

    .vipImg {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-bottom: 10px;
    }
}

.bottomBox {
    width: 95%;
    height: 125px;
    border-radius: 8px;
    overflow-x: hidden;
}
.text {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: #bebebe;
    font-size: 12px;
}
//pop 弹出
// 遮罩层
.mask {
    background-color: #000;
    opacity: 0.3;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998 !important;
}

// 弹出层
.pop {
    background-color: #fff;
    position: fixed;
    top: 100px;
    width: 80%;
    z-index: 999 !important;
    margin: 0 auto;
    border-radius: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 20px 30px 20px;

    .signBox {
        padding: 20px 0px 2px 19px;

        .oneRoundBox {
            float: left;
            width: 25%;
            background-color: #fff;

            .bbBox {
                .roundBox {
                    .round {
                        max-width: 45px;
                        max-height: 45px;
                        border: 6px solid #cfcdcd;
                        border-radius: 50%;
                        background-color: #fff;
                        opacity: 0.95;
                    }

                    .roundPadding {
                        max-width: 45px;
                        max-height: 45px;
                        border-radius: 50%;
                        opacity: 0.95;
                        border: 6px solid #9A59D0;
                        color: #9A59D0;
                        text-align: center;
                    }

                }

                .line {
                    width: 40%;
                    height: 5px;
                    background-color: #E1E1E1;
                    position: absolute;
                    top: 50%;
                    left: 60%;
                    transform: translateY(-50%);
                }

                .linePadding {
                    width: 40%;
                    height: 5px;
                    background-color: #9A59D0;
                    position: absolute;
                    top: 50%;
                    left: 64%;
                    transform: translateY(-50%);
                }
            }

            .bbColor {
                font-size: 11px;
                color: #E1E1E1;
                text-align: center;
            }

            .bbColorPadding {
                font-size: 11px;
                color: #9A59D0;
                text-align: center;
            }

        }
    }
}

</style>
